<template>
	<div :class="className">
		<div style="height: 45%;">
			<Chart :cdata="cdata" />
		</div>
		<dv-scroll-board :config="config" style="height: 48%; margin-top: 2%;" />
	</div>
</template>

<script>
import Chart from './chart';

export default {
    components: {
        Chart,
    },
    props: {
        className: { type: String, default: '' },
        isMock: { type: Boolean, default: false },
    },
    data() {
        return {
            cdata: [],
            configRawData: [],
            config: {
                header: ['警报', '分类', '时间'],
                data: [],
                rowNum: 6, // 表格行数
                headerHeight: 28,
                headerBGC: '#0f1325', // 表头
                oddRowBGC: '#0f1325', // 奇数行
                evenRowBGC: '#171c33', // 偶数行
                index: false,
                columnWidth: [240, 100],
                align: ['left', 'center']
            },
            dataTimer1: null,
            dataTimer2: null,
        };
    },
    mounted() {
        if (this.isMock) {
            this.mock();
            return;
        }

        this.getAlarmstData();
        this.getStatData();
        this.setTimer();
    },
    beforeUnmount() {
        if (this.dataTimer1) {
            clearInterval(this.dataTimer1);
            this.dataTimer1 = null;
        }
        if (this.dataTimer2) {
            clearInterval(this.dataTimer2);
            this.dataTimer2 = null;
        }
    },
    methods: {
        setTimer() {
            this.dataTimer1 = setInterval(async () => {
                await this.getAlarmsData();
            }, 17000); // 17s

            this.dataTimer2 = setInterval(async () => {
                await this.getStatData();
            }, 60000); // 60s
        },
        mock() {
            this.dataTimer = setInterval(() => {
                if (this.config.data.length < 9) {
                    this.config.data.push([
                        `机器人弧焊电流过高`,
                        '机器人',
                        this.$TOOL.dateFormat(new Date(), 'MM/dd HH:mm:ss')
                    ]);
                }

                if (this.config.data.length === 12) {
                    this.config.data.shift();
                }
            }, 1700);

            this.cdata = [
                { value: 40, name: '机器人' },
                { value: 38, name: '夹具' },
                { value: 32, name: '气密设备' },
                { value: 30, name: '传感器' },
                { value: 28, name: '焊机' },
                { value: 40, name: '扫码枪' },
            ];
        },
        async getAlarmsData() {
            try {
                const resp = await this.$API.reportequipalarm.alarm.get();
                if (resp.code === 200) {
                    const data = resp.data;
                    if (!data?.length) {
                        return;
                    }

                    // 去重处理
                    data.forEach(e => {
                        if (!this.configRawData.some(s => s.id === e.id)) {
                            this.configRawData.push(e);
                        }
                    });

                    const count = this.configRawData.length;
                    if (count > 15) {
                        this.configRawData.slice(0, count - 15); // 移除前几个元素
                    }

                    const rows = this.configRawData.map(e => [
                        e.content,
                        e.classify,
                        this.$TOOL.dateFormat(new Date(e.startTime), 'MM/dd HH:mm:ss'),
                    ]);
                    this.config.data = rows;
                }
            }
            catch {
                console.warn("[productivity-rt] 无响应数据");
            }
        },
        async getStatData() {
            try {
                const resp = await this.$API.reportequipalarm.groupClassify.get();
                if (resp.code === 200) {
                    this.cdata = resp.data?.map(s => ({ name: s.name, value: s.count }));
                }
            }
            catch {
                console.warn("[productivity-rt] 无响应数据");
            }
        },
    }
}
</script>
